import React from 'react';
import './index.less';
import { Carousel } from 'antd';
import NewsList from '../NewsList';
import ProductCardList from '../ProductCardList';
function Home() {
    // 后续从后端请求图片
    const imgs = [
        'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
        'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
        'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
        'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',]

    // 新闻数据
    const news = [
        {
            id: '1',
            imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
            title: '测试新闻标题',
            content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
        },
        {
            id: '2',
            imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
            title: '测试新闻标题',
            content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
        },
        {
            id: '3',
            imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
            title: '测试新闻标题',
            content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
        }
    ]

    // 研究成果数据
    const search = [
        {
            id: '1',
            imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
            title: '测试研究成果',
            content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
        },
        {
            id: '2',
            imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
            title: '测试研究成果',
            content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
        },
        {
            id: '3',
            imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
            title: '测试研究成果',
            content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
        }
    ];

    // 成果展示
    const products = [
        {
            id: '1',
            imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
            title: '测试研究成果',
            content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
        },
        {
            id: '2',
            imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
            title: '测试研究成果',
            content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
        },
        {
            id: '3',
            imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
            title: '测试研究成果',
            content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
        }
    ];
    return (
        <div id="home-container">
            <div id="home-content">
                <div id="home-carousel">
                    <Carousel autoplay>
                        {
                            imgs.map(item => (
                                <img key={item} src={item}></img>
                            ))
                        }
                    </Carousel>
                </div>
                <div className="home-item">
                    <div>
                        <NewsList
                            title="新闻动态"
                            data={news}
                            moreLink="/#/news"
                            imgSize={{
                                width: '138px',
                                height: '100px',
                            }}
                        />
                    </div>
                    <div>
                        <NewsList
                            title="研究成果"
                            data={search}
                            moreLink="/#/publications"
                            imgSize={{
                                width: '138px',
                                height: '100px',
                            }}
                        />
                    </div>
                </div>
                <div className="home-item">
                    <ProductCardList
                        title='成果展示'
                        data={products}
                        moreLink='/#/products'
                    />
                </div>
            </div>
        </div>
    )
}

export default Home;